<script setup>
import {onMounted, reactive} from "vue";
import axios from "axios";

const link = async function () {
  const UserInfo = JSON.parse(sessionStorage.getItem("UserInfo")).AccessToken;
  const user = JSON.parse(UserInfo)
  window.open(
      `http://fcgzy2.yunuat.cqyt.petrochina/#/login?jwt=yltrqclc_${user.Account}_${user.AccessToken}`
  );
};
const WorkData = reactive({a: 0, b: 0, c: 0, aUp: 0, bUp: 0, cUp: 0});

async function getData() {
  let token = await getToken();

  axios({
    url: "http://10.78.1.12:10008/api/Constructor/hand-out-task-api/today-task-list-by-dept-code?deptcode=00000055001800030009",
    headers: {
      Authorization: `Bearer ${token}`,
    },
  }).then((response) => {
    WorkData.a = 0;
    WorkData.aUp = 0;
    WorkData.b = 0;
    WorkData.bUp = 0;
    WorkData.c = 0;
    WorkData.cUp = 0;
    if (response.data.data.objData) {
      let data = response.data.data.objData;
      data.forEach((i) => {
        if (
            i.hoState == 4 ||
            i.hoState == 5 ||
            i.hoState == 6 ||
            i.hoState == 7 ||
            i.hoState == 8
        ) {
          switch (i.level) {
            case "A级":
              WorkData.a++;
              break;
            case "B级":
              WorkData.b++;
              break;
            case "C级":
              WorkData.c++;
              break;
            case "A级升级":
              WorkData.aUp++;
              break;
            case "B级升级":
              WorkData.bUp++;
              break;
            case "C级升级":
              WorkData.cUp++;
              break;
          }
        }
      });
    }
  });
}

function getToken() {
  return new Promise((resolve, reject) => {
    axios({
      url: "http://10.78.1.12:10008/api/constructor/authcenter-api/jwt-token",
      method: "post",
      data: {
        userName: "ba62a4b730f65Anff4kfn2pfad14d462",
        passWord: "68a39b4790503ef481d8e0a66e065fc3",
      },
    }).then((res) => {
      resolve(res.data.data.objData.accessToken);
    });
  });
}

onMounted(() => {
  // getData();
  // setInterval(() => {
  //   getData();
  // }, 1000 * 60 * 2);
});
</script>
<template>
  <div class="Unconventional">
    <div class="header">
      <div class="title" @click="link"></div>
    </div>
    <div class="Frame">
      <div class="item">
        <div class="number">
          <span>{{ WorkData.a }}</span>
        </div>
        <div class="title">特殊作业</div>
      </div>
      <div class="item">
        <div class="number">
          <span>{{ WorkData.b }}</span>
        </div>
        <div class="title">非常规作业</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Unconventional {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.header {
  height: 0.2031rem;
  width: 100%;
  display: flex;

  .title {
    height: 0.2rem;
    width: 40%;
    display: inline-block;
    background-image: url("@/assets/title/unconventionalTitle.png");
    background-repeat: no-repeat;
    background-size: 0.56rem 0.1406rem;
    background-position: 0.0521rem 50%;
    cursor: pointer;
  }
}

.Frame {
  height: calc(100% - 0.2rem);
  width: 100%;
  padding: 0.025rem 0.23rem;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .item {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .number {
      width: 0.72rem;
      height: 60%;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        font-size: 0.13rem;
        font-weight: bold;
        color: #ffffff;
      }
    }

    .title {
      width: 0.43rem;
      height: 20%;
      font-size: 0.07rem;
      font-weight: 600;
      color: #e6eaf3;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
    }
  }

  .item:nth-child(1) {
    .title {
      background-image: url("@/assets/ATitle.png");
      background-size: 100% 100%;
    }

    .number {
      background-image: url("@/assets/A.png");
      background-size: 100% 100%;

      span {
        background: linear-gradient(0deg, #ffffff 0%, #e42464 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .item:nth-child(2) {
    .title {
      background-image: url("@/assets/B_Title.png");
      background-size: 100% 100%;
    }

    .number {
      background-image: url("@/assets/B.png");
      background-size: 100% 100%;

      span {
        background: linear-gradient(0deg, #ffffff 0%, #ffba00 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .item:nth-child(3) {
    .title {
      background-image: url("@/assets/C_Title.png");
      background-size: 100% 100%;
    }

    .number {
      background-image: url("@/assets/C.png");
      background-size: 100% 100%;

      span {
        background: linear-gradient(0deg, #ffffff 0%, #3ceaff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .item:nth-child(4) {
    .title {
      background-image: url("@/assets/A_Up_Title.png");
      background-size: 100% 100%;
    }

    .number {
      background-image: url("@/assets/A_up.png");
      background-size: 100% 100%;

      span {
        background: linear-gradient(0deg, #ffffff 0%, #ff2121 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .item:nth-child(5) {
    .title {
      background-image: url("@/assets/B_Up_Title.png");
      background-size: 100% 100%;
    }

    .number {
      background-image: url("@/assets/B_up.png");
      background-size: 100% 100%;

      span {
        background: linear-gradient(0deg, #ffffff 0%, #fff21d 98.974609375%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .item:nth-child(6) {
    .title {
      background-image: url("@/assets/C_Up_Title.png");
      background-size: 100% 100%;
    }

    .number {
      background-image: url("@/assets/C_up.png");
      background-size: 100% 100%;

      span {
        background: linear-gradient(0deg, #ffffff 0%, #156af7 99.21875%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
</style>
